<template>
  <transition name="home">
    <div class="choose">
      <transition name="left" appear>
        <router-link :to="{ name: 'Desc' }">
          <Choose
            title="展示"
            :imgPath="require('@/components/Choose/images/car.png')"
          />
        </router-link>
      </transition>
      <transition name="right" appear>
        <router-link :to="{ name: 'Control' }">
          <Choose
            title="控制"
            :imgPath="require('@/components/Choose/images/cardboard.png')"
          />
        </router-link>
      </transition>
    </div>
  </transition>
</template>

<script>
import Choose from "../Choose";
export default {
  name: "Home",
  components: { Choose }
};
</script>

<style lang="less" scoped>
.home-leave-to {
  transform: scale(0);
}
.home-enter-to {
  transform: scale(1);
}
.home-leave-active,
.home-enter-active {
  transition: all 1.2s ease;
}

a {
  text-decoration: none;
  color: black;
  outline: none;
  &:hover,&:active {
    -webkit-tap-highlight-color: transparent;
  }
}
.choose {
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
}
.left-enter-active,
.right-enter-active {
  transition: all 1.2s ease;
}

.right-enter {
  transform: translateX(100%);
}
.left-enter {
  transform: translateX(-100%);
}
.letf-enter-to,
.right-enter-to {
  transform: translateX(0);
}
</style>